<template>
    <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title all-teacher-title">
        <h2 class="fl tac">
          <span class="c-333">我的订单</span>
        </h2>
      </header>
      <section v-if="list.length===0" class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">您当前还没有订单...</span>
          </section>
        </div>
        </section>
          <!-- /无数据提示 结束-->
          <el-table
      :data="list"
      border
      fit
      highlight-current-row
      row-class-name="myClassList">
     
      <el-table-column label="课程信息" prop="title" width="300" align="center">
        <template slot-scope="scope">
          <div class="info">
            <div class="pic">
                <img width="150" :src="scope.row.courseCover" :alt="scope.row.courseTitle">
            </div>
            <div class="title">
                <a :href="`/course/${scope.row.courseId}`">{{scope.row.courseTitle}}</a>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="讲师名称"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.teacherName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalFee===0?'免费':'￥'+scope.row.totalFee.toFixed(2)}}</span>
        </template>
    </el-table-column>
    <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
            <el-tag :type="scope.row.status=='Normal'?'success':''">
                {{ scope.row.status==1?'已支付':'未支付'}}
            </el-tag>
        </template>
    </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="200" align="center">
      <template slot-scope="scope">
        <router-link :to="`/course/${scope.row.courseId}`"> 
          <el-button icon="el-icon-search" type="primary" size="mini">去学习</el-button>
        </router-link>
      </template>
    </el-table-column>
    </el-table>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>
<script>
import orderApi from '../../api/order';
export default{
    data(){
        return{
            list:[]
        }
    },
    created(){
        this.initOrderList()
    },
    methods:{
        initOrderList(){
            orderApi.getOrder().then(res=>{
                this.list=res.data
            })
        }
    }
}
</script>